עורך HTML

עורך HTML הוא כינוי לתוכנה לעריכת קוד HTML, שהיא שפת התגיות שבאמצעותה בונים דפי אינטרנט. בעוד שניתן ליצור ולערוך קוד HTML באמצעות כל כלי לעריכת טקסט, עורכי HTML ייעודיים מספקים כלים שימושיים ונוחים יותר. לדוגמה, עורכי HTML רבים מטפלים לא רק ב-HTML, אלא גם בטכנולוגיות קשורות כגון:CSS, XML, ובשפות תכנות נוספות לסביבת האינטרנט דוגמת JavaScript. עורכים מסוימים גם עשויים לכלול כלים לניהול אתרי אינטרנט שלמים; כלי ניהול פרויקטים, יצירת תקשורת עם שרתי אחסון אתרים באמצעות FTP ו- WebDAV, ומערכות לבקרת גרסאות כמו Subversion או Git.

תוכנות רבות לעיבוד תמלילים, עיצוב גרפי ותוכנות עימוד שאינן מתמקדות בהכרח בעיצוב אתרים, כגון Microsoft Word או Quark XPress, יכולות גם הן לתפקד כעורכי HTML.

סוגי עורכים

ישנם שני סוגים עיקריים של עורכי HTML: עורכי HTML מבוססי טקסט, ועורכי HTML חזותיים, מבוססי שיטת WYSIWYG. בעוד שבעבר ההבדלה הזו הייתה יותר בולטת, כיום לא נדיר לראות עורכי HTML שמשלבים למעשה את שני הסוגים.

עורכי HTML מבוססי טקסט

בעוד שניתן ליצור ולערוך קוד HTML באמצעות כל כלי לעריכת טקסט, דוגמת פנקס הרשימות של חלונות, עורכי HTML ייעודיים מספקים כלים שימושיים ונוחים יותר.

עורכי טקסט המותאמים לכתיבת קוד HTML בדרך כלל יספקו סכמת צביעה לקוד כאלמנט בסיסי בתוכנה. עורכים מסוימים מציגים, בנוסף, גם תבניות, סרגלי כלים וקיצורי מקשים כדי להכניס במהירות עצמים ומבני HTML נפוצים, כמו כן גם אשפים, Tooltips וטכניקות כהשלמה אוטומטית, המקלים על המפתח במהלך עבודתו.

עורכי HTML מבוססי טקסט מכילים בדרך כלל, כפונקציות מובנות או כאפשרויות להרחבה, גם כלים ייעודיים נוספים למשימות כגון בקרת גרסאות, בדיקת קישורים, ניקוי ועיצוב קוד, בדיקת איות ודקדוק, יצירת קשר עם שרת מרוחק באמצעות FTP או WebDAV, וניהול האתר כפרויקט.

בהיותם כלים תכנותיים, עורכי HTML שכאלו מחייבים ידע בשפת HTML לפחות, ובכל טכנולוגיות אינטרנט אחרות בהן מעוניין המפתח להשתמש כמו CSS, JavaScript או שפות צד-שרת, ועל כן הם נתפסים לרוב כלא-ידידותיים למשתמש המתחיל ועם זאת מועדפים על ידי מפתחים מנוסים יותר שמעדיפים "להתעסק ישירות" עם הקוד. עם זאת, חלק מהעורכים מקלים על המשתמש באמצעות כלים ויזואליים שונים שהמשתמש יכול להיעזר בהם כדי לערוך קטעי קוד, דוגמת תכונות של תגיות HTML, מבלי לכתוב אותם ישירות, וכן חלקם מספקים כלי לתצוגה מקדימה של הקוד שנכתב.

דוגמאות לעורכים כאלו: Notepad++, AceHTML, HomeSite, Visual Studio Code, בראקטס.

עורכי HTML חזותיים - מבוססי שיטת WYSIWYG

עורכי HTML המשתמשים בשיטת "WYSIWYG" (ראשי תיבות מאנגלית של "מה שאתה רואה זה מה שאתה מקבל") מספקים ממשק עריכה חזותי, שבו דף האינטרנט מוצג בצורה דומה לאופן הצגתו בדפדפן אינטרנט, ובכך שימוש בתוכנה שכזו דומה למדי לשימוש בתוכנת עיבוד תמלילים או עיצוב גרפי. מכיוון ששימוש בעורך חזותי עשוי לא לדרוש שום ידע מוקדם ב-HTML, עורכים שכאלו לרוב נחשבים לידידותיים יותר למשתמש שרק התחיל את צעדיו בעולם עיצוב האתרים.

במישור הטכני, תצוגת ה-WYSIWYG מושגת על ידי הטמעת מנוע פריסת תצוגה בתוך תוכנת העריכה, כדי לדמות עריכה "ישירה" של דף כאילו נלקח מהדפדפן. מנוע שכזה יכול להיות מותאם אישית (ובכך משרת רק את התוכנה עצמה) או מבוסס על מנוע קיים (דוגמה: עורך המשתמש במנוע פריסת התצוגה של מוזילה, Gecko). המטרה היא שכל פעולה שהמשתמש יעשה צריכה לייצג את מה שייראה בהמשך בדפדפן אינטרנט טיפוסי.

עם הזמן, פותחו פרדיגמות עיצוב נוספות, דוגמת WYSIWYM (מה שאתה רואה זה מה שאתה מתכוון) שהבסיס העומד מאחוריה הוא שבמקום להתמקד בפורמט או במצגת המסמך, יש להתמקד במשמעות של כל אחד מהרכיבים. לדוגמה, כותרות דפים, קטעים, פסקאות וכו' מתויגות ככאלה בתוכנית העריכה, כדי שיהיו מוצגות כראוי בדפדפן.

קשיים ביישום WYSIWYG

לעיתים, מסמך HTML לא יהיה עקבי במראהו ותפקודו בפלטפורמות שונות מסיבות כלשהן, מה שמקשה על השגת האידיאל אליו גישת WYSIWYG חותרת להגיע. לדוגמה:

דפדפנים שונים עשויים לרנדר את אותו הקוד בצורות שונות. כיוון שדפדפנים שונים משתמשים במנועי פריסת תצוגה שונים, התוצאה המתקבלת עשויה להכיל הבדלי תצוגה ופונקציונליות בדפדפנים שונים. הדבר נעשה מסובך עוד יותר כאשר לוקחים בחשבון דפדפנים המיועדים למכשירים שאינם מחשבים שולחניים, דוגמת מחשבי כף-יד, טאבלטים או טלפונים חכמים. גישת עיצוב האתרים הרספונסיבית נותנת מענה לחלק מהבעיות שצצות במקרים אלו.
דפדפני אינטרנט, ככל תוכנות המחשב, עשויים להכיל באגים או מגבלות טכניות המונעות יישום טכנולוגיות חדשות. הבעיה הייתה בולטת בעיקר בעבר היותר רחוק, כאשר היו עוד קיימים אתרי אינטרנט שהשתמשו בפקדים מיוחדים שרק דפדפנים מסוימים יכלו להציג. (דוגמת ActiveX)
סגנון עיצובי מסוים יכול לייצג מספר משמעויות סמנטיות. משמעות סמנטית של עצמים במסמך חשובה למנועי חיפוש וגם לכלי נגישות שונים. על הנייר, אנו יכולים לדעת מתוך ההקשר ומהנסיון האישי שלנו האם טקסט מודגש מייצג כותרת, או טקסט שיש להתייחס אליו בתשומת לב, או כל דבר אחר. אבל קשה מאוד להעביר את ההבחנה הזו לעורך חזותי. סימון טקסט מסוים כמודגש לא בהכרח יגרום לעורך לדעת למה סימנת את הטקסט כך, ומה רצית להשיג באמצעות הדגשת הטקסט.
אתרי אינטרנט מודרניים בדרך כלל משתמשים במערכת ניהול תוכן או בדרך אחרת לבניית דפים מתבנית מוכנה מראש תוך כדי שימוש בתוכן המאוחסן במסד נתונים. דפים נפרדים לעולם אינם מאוחסנים בשרת האחסון מכיוון שהם עשויים להיות מועתקים, ולכן ניהול התוכן מבסיס הנתונים והכנסתו אל תוך תבנית מופשטת הוא צעד בלתי נמנע, והיא מבטלת את אחד היתרונות העיקריים של שימוש בעורך חזותי.

סיבות אלו ואחרות הובילו מפתחי תוכנה לפתח מוצרים המשלבים את שתי הגישות (התכנותית מבוססת הטקסט, והחזותית מבוססת WYSIWYG), ונדיר מאוד למצוא עורכי HTML מקצועיים ייעודיים הדוגלים רק בשיטה החזותית (אם כי לא נדיר לראות עורכי HTML מבוססי קוד בלבד).

דוגמאות לעורכים כאלו: Microsoft FrontPage, Dreamweaver, BlueGriffon, Amaya, Microsoft Expression Web. למעשה, תוכנות רבות שבכלל יועדו לעיצוב גרפי ועיבוד תמלילים כוללות באמתחתן אפשרות ייצוא לפורמט HTML, אם כי, לרוב, הקוד המופק מתוכנות אלו אינו תקני (ראו בהמשך) ועשוי שלא לרוץ כמו שצריך על חלק מהדפדפנים.

קוד HTML תקני

HTML היא שפת סימון בעלת מבנה קבוע. ישנם כללים ברורים כיצד לכתוב קוד HTML כדי להתאים לתקני W3C עבור האינטרנט. המטרה שלפיה יש להקפיד על כללים אלו היא לגרום לכך שאתרי אינטרנט יהיו זמינים בכל סוגי המחשבים, יהיו נגישים לבעלי מוגבלויות, וגם ניתנים להפעלה במכשירים ניידים כמו טלפונים ניידים ומחשבי כף יד. עם זאת, מרבית מסמכי ה-HTML באינטרנט אינם עומדים בדרישות של תקני W3C. במחקר שנערך ב -2011 על 350 אתרי האינטרנט הפופולריים ביותר (שנבחרו על ידי מדד Alexa), 94 אחוז מאתרי האינטרנט נכשלו במבחני מבנה הקוד ותקינות גיליונות הסגנון, או שיישמו קידוד תווים באופן לא תקין.^[1] אפילו המסמכים הנכונים מבחינה תחבירית עשויים להיות לא יעילים בגלל "שכפול קוד" מיותר, או על סמך כללים שהוצאו מכלל שימוש (deprecated) לפני זמן רב. המלצות W3C הנוכחיות על השימוש ב-CSS עם HTML פורסמו לראשונה על ידי W3C בשנת 1996^[2] ועברו מספר שינויים ותיקונים מאז.

הנחיות אלה מדגישות כי צריכה להתקיים הפרדה בין תוכן (HTML או XHTML) לסגנון (CSS). המשמעות של הפרדה כזו היא שמפתחי אתרים יכולים להעביר מידע סגנוני הממוקם בקובץ CSS לכלל דפי האתר במקום "לשכפל את הקוד" בדפים נפרדים. מפתחים של תוכנות עריכה חזותיות משתדלים להדריך את המשתמשים כיצד ליישם עקרונות אלו מבלי לבלבל אותם, והתוצאה היא שרוב העורכים החזותיים המודרניים מצליחים בכך במידה מסוימת, אך אף אחד מהם לא הצליח לחלוטין.

עם זאת, כאשר מתכוונים ליצור דף אינטרנט, גם אם בצורה חזותית או "ידנית", על המפתח לזכור לשמור על תקינות ותקניות הקוד, ובכך יוכל להתאים את האתר לקהלי יעד רבים ולשמור על ה"עולמיות" של האינטרנט.^[3] לשם כך המפתח יכול להיעזר בשירותי Validator W3C חופשיים (W3C HTML Validator ו- W3C CSS Validator) או באלטרנטיבות אחרות אמינות.

על המפתח לזכור כי הנגשתם של דפי אינטרנט לבעלי מוגבלויות לא רק שמומלצת על ידי גופי התקינה אלא גם מחויבת לפי החוק. מדינות רבות בעולם חוקקו חוקים המחייבים מפתחי אתרים להוסיף אפשרויות נגישות,^[3] וכך גם בישראל, מתוקף סימן ג' לתקנות שוויון זכויות לאנשים עם מוגבלות (התאמות נגישות לשירות), התשע"ג-^[4]2013. הנגשת דפים מורכבת יותר מסתם בדיקת תקינות; תקינות האתר היא תנאי מוקדם, אך ישנם גורמים רבים אחרים שיש לקחת בחשבון.^[5] עיצוב טוב של אתרי אינטרנט, בין אם נעשה בצורה חזותית וגם "ידנית", צריך להתחשב גם בנושא זה..

בסופו של דבר, הכלי בו משתמשים לבניית דפי האינטרנט אינו משנה את איכות הקוד, אלא כישוריו של מפתח האינטרנט. ידע מסוים בשפות הרלוונטיות - HTML, CSS ושפות סקריפט אחרות, כמו גם היכרות עם ההמלצות הנוכחיות של W3C בתחומים אלה, יעזרו לכל מפתח או מעצב להפיק דפי אינטרנט טובים יותר, ללא תלות בכלי העבודה.^[6]

קישורים חיצוניים

מדיה וקבצים בנושא עורך HTML בוויקישיתוף

הערות שוליים

^ "Responsive Web Design, Domain Registration, Web Hosting". Sikoswebconsulting.com. אורכב מ-המקור ב-2018-10-22. נבדק ב-2013-10-23.
^ "Cascading Style Sheets, level 1". W3.org. נבדק ב-2013-10-23.
^ ¹ ² Harold, Elliotte Rusty (2008). Refactoring HTML. Boston: Addison Wesley. ISBN 978-0-321-50363-3.
^ הנגשת אתרי אינטרנט, באתר GOV.IL
^ "Web Content Accessibility Guidelines (WCAG) 2.0". W3.org. 2008. נבדק ב-2013-10-23.
^ "Dave Raggett's Introduction to HTML". W3.org. 2005-05-24. נבדק ב-2013-10-23.

[1] "Responsive Web Design, Domain Registration, Web Hosting". Sikoswebconsulting.com. אורכב מ-המקור ב-2018-10-22. נבדק ב-2013-10-23.

[2] "Cascading Style Sheets, level 1". W3.org. נבדק ב-2013-10-23.

[RefactoringHtml-3] ¹ ² Harold, Elliotte Rusty (2008). Refactoring HTML. Boston: Addison Wesley. ISBN 978-0-321-50363-3.

[4] הנגשת אתרי אינטרנט, באתר GOV.IL

[5] "Web Content Accessibility Guidelines (WCAG) 2.0". W3.org. 2008. נבדק ב-2013-10-23.

[6] "Dave Raggett's Introduction to HTML". W3.org. 2005-05-24. נבדק ב-2013-10-23.

[1]

[2]

[3]

[4]

[5]

[6]